.container {
  background: #efefef;

  .header {
    display: flex;
    align-items: center;
    width: 100%;
    height: 84rpx;
    background: #e43130;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    // 左侧分类icon
    .icon_sort_text_wrapper {
      display: flex;
      width: 8%;
      flex-direction: column;
      text-align: center;

      image {
        width: 28rpx;
        height: 28rpx;
        padding-bottom: 2rpx;
        margin: 0 auto;
      }

      .sort_text {
        color: #fff;
        font-size: 14rpx;
      }
    }

    // 右侧搜索条
    .header_search_wrapper {
      display: flex;
      align-items: center;
      width: 86%;
      box-sizing: border-box;
      background: #fff;
      border-radius: 20px;
      padding: 4px 10px;
      margin: 0 auto;

      .icon_search {
        width: 28rpx;
        height: 28rpx;
        margin-right: 5px;
      }

      .hot_search_text {
        color: #bbb;
        font-size: 12px;
      }
    }
  }

  .swiper_wrapper {
    width: 100%;
    position: relative;
    padding-top: 110rpx;

    .bg {
      width: 100%;
      height: 200rpx;
      background: #e43130;
      border-bottom-right-radius: 3em 10px;
      border-bottom-left-radius: 3em 10px;
      position: absolute;
      top: 0;
      left: 0;
    }

    .swiper {
      width: calc(100% - 30rpx);
      height: 360rpx;
      box-sizing: border-box;
      border-radius: 8rpx;
      overflow: hidden;
      margin: 0 auto;

      .swiper_item {
        image {
          width: 100%;
          height: inherit;
        }
      }
    }
  }

  // 频道
  .category_wrapper {
    background: #fff;
    margin-top: 20rpx;

    .category_tab_wrapper {
      width: 100vw;
      height: 80rpx;
      box-sizing: border-box;
      font-size: 0;
      line-height: 80rpx;
      padding: 0 10px;
      margin-bottom: 30rpx;

      scroll-view {
        white-space: nowrap;

        .category_list_name {
          display: inline-block;
          height: 100%;
          box-sizing: border-box;
          text-align: center;
          font-size: 32rpx;
          padding: 0 20rpx;

          &.active {
            color: #e43130;
            border-bottom: 2px solid #e43130;
          }
        }
      }
    }

    .good_list_wrapper {
      width: 100vw;
      box-sizing: border-box;
      padding: 20rpx 15rpx;

      scroll-view {
        white-space: nowrap;

        .good_item {
          display: inline-block;
          width: 200rpx;
          height: 230rpx;
          box-sizing: border-box;
          font-size: 24rpx;
          padding: 0 10rpx;

          image {
            width: 100%;
          }

          .good_name {
            width: 100%;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            margin-bottom: 10rpx;
          }

          .good_price_wrapper {
            display: flex;
            justify-content: space-between;
            width: 100%;
            color: #e43130;

            text {
              border: 1rpx solid #f06a6a;
              border-radius: 18rpx;
              padding: 5rpx 10rpx;
              font-size: 16rpx;
            }
          }
        }
      }
    }
  }

  // 品牌
  .brand_list_wrapper {
    width: calc(100% - 30rpx);
    box-sizing: border-box;
    border-radius: 18rpx;
    background: #fff;
    overflow: hidden;
    margin-top: 20rpx;

    .title_wrapper {
      height: 90rpx;
      background: #e43130;
      color: #fff;
      font-size: 30rpx;
      position: relative;

      .brand_title {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }

    swiper {
      width: 100%;
      height: 250rpx !important;
      box-sizing: border-box;
      padding: 20rpx 10rpx;

      swiper-item {
        width: 25% !important;
        height: 100%;
        box-sizing: border-box;
        padding: 0 10rpx;

        .image_wrapper {
          height: 150rpx;
          margin-bottom: 10rpx;

          image {
            width: 100%;
            height: 100% !important;
          }
        }

        .brand_name {
          font-size: 22rpx;
        }
      }
    }
  }
}



.line_clamp2 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  line-clamp: 2;
}

.ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/*
	search-icon color -> #cdcdcd
 */